<template>
  <div class="dialog">
    <el-dialog
      title="仓库详情"
      :visible.sync="showDialog"
      width="55%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      
      <el-table
        ref="tableData"
        v-loading="loading"
        highlight-current-row
        :data="tableData"
        stripe
        border
        :row-key="
          row => {
            return row.warehouseDetailId;
          }
        "
      >
        <el-table-column type="index" label="序号" width="50">
          <template slot-scope="scoped">
            {{ scoped.row.warehouseDetailId?scoped.$index+1:'' }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="物料名称" />
        <el-table-column prop="num" label="数量" />
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </el-dialog>
  </div>
</template>

<script>
import WarehouseDetailApi from "@/api/warehouse-manage/warehouse-detail";
import Pagination from "@/components/Pagination";
import { mapGetters } from "vuex";
import { mymixin } from "@/utils/mixin";
export default {
  name: "",
  components: {Pagination},
  mixins: [mymixin],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    completeInfoObject: {
      type: [Object],
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      tableData:[],
      showDialog:this.show
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission",
    }),
  },
  watch: {
    show(v) {
      this.showDialog = v;
    },
    completeInfoObject(v) {
      this.queryWarehouseDetail(v)
    },
  },
  created() {},
  mounted() {
  },
  methods: {
    queryWarehouseDetail(v){
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          warehouseId: v.warehouseId
        }
      }
      WarehouseDetailApi.queryPageByCondition(params).then(res=>{
        if(res.success){
          this.tableData = res.data.content;
        }
      })
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.queryPageList();
    },
    close() {
      this.$emit("closeDialog");
    },
    cancel() {
      this.$emit("cancelDialog");
    },
  },
};
</script>

<style lang="scss" scoped>
  .el-table{
    position: relative;
  }
  ::v-deep .el-dialog__body{
    padding: 30px 20px 50px 20px;
  }
</style>
